<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户管理</title>
    <link rel="stylesheet" href="/css/global.css">
    <link rel="stylesheet" href="/css/function.css">
    <link rel="stylesheet" href="/css/admin/user.css">
    <script src="/js/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div class="g_container" id="app">
        <div>
            <span>用户列表</span>
            <button v-on:click="showPopup()">新增用戶</button>
            <a href="/admin">返回</a>
        </div>
        <div>
            <div class="user_item" v-for="user in userList">
                <div class="f_flt">{{user.userName}}</div>
                <div class="f_flt">{{user.role}}</div>
                <div class="f_frt">
                    <div>修改权限</div>
                    <div v-on:click="deleteUser(user)">刪除</div>
                </div>
            </div>
        </div>
        <div class="popup" v-if="isShowPopup">
            <div class="popup_box">
                <div>
                    <div>新增用户</div>
                    <div v-on:click="closePupup()">关闭</div>
                </div>
                <div>
                    <label for="">用户名：</label>
                    <input name="userName" v-model="userName" type="text" />
                </div>
                <div>
                    <label for="">密码：</label>
                    <input name="password" v-model="password" type="password" />
                </div>
                <div>
                    <label for="">权限：</label>
                    <select v-model="role" name="role">
                        <option value="admin">管理员</option>
                        <option value="user">普通用户</option>
                    </select>
                </div>
                <div>
                    <button v-on:click="addUser()">新增</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                role: '',
                userName: '',
                password: '',
                userList: [],
                isShowPopup: false
            },
            created: function() {
                this.initData();
            },
            methods: {
                initData: function() {
                    var _this = this;
                    $.ajax({
                        type: 'GET',
                        url: '/api/user/getUser',
                        data: {},
                        success: function(data) {
                            console.log('datafdsdfsdfsdf', data);
                            _this.userList = data.data;

                        },
                        error: function(err) {
                            console.error('err::::', err);
                        }
                    });
                },

                showPopup: function() {
                    this.isShowPopup = true;
                },

                closePupup: function() {
                    this.isShowPopup = false;
                },

                deleteUser: function(user) {
                    console.log('user--::', user);
                    var _this = this;
                    $.ajax({
                        type: 'POST',
                        url: '/api/user/delete',
                        data: {
                            userId: user._id
                        },
                        success: function(data) {
                            console.log('deleteUser---', data);
                            _this.initData();

                        },
                        error: function(err) {
                            console.error('err::::', err);
                        }
                    });
                },

                addUser: function() {
                    console.log('this.role---', this.role);
                    var _this = this;
                    if(!this.userName || this.userName === '') {
                        alert('请输入用户名！');
                        return;
                    }
                    if(!this.password || this.password === '') {
                        alert('请输入密码！');
                        return;
                    }
                    if(!this.role || this.role === '') {
                        alert('请选择角色！');
                        return;
                    }

                    $.ajax({
                        type: 'POST',
                        url: '/api/user/addUser',
                        data: {
                            userName: _this.userName,
                            password: _this.password,
                            role: _this.role,
                        },
                        success: function(data) {
                            _this.initData();
                            _this.closePupup();
                        },
                        error: function(err) {
                            console.error('err::', err);
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>